<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>头部导航栏</title>
</head>
<body>
    <header th:fragment="headNav" class="header" id="site-header">
    <div class="page-title">
        <h6>交友网站</h6>
    </div>
    <div class="header-content-wrapper">
        <!--数据：搜索-->
        <form class="search-bar w-search notification-list friend-requests">
            <div class="form-group with-button">
                <input class="form-control" placeholder="搜索人或事……" type="text" required/>
                <button>
                    <svg class="olymp-magnifying-glass-icon">
                        <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"
                        th:href="@{/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon}"></use>
                    </svg>
                </button>
            </div>
        </form>
        <!--end数据：搜索-->
        <div class="control-block">
            <!--导航栏用户-->
            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <!--数据：当前用户头像-->
                    <img alt="author" th:src="@{${session.user.getHeadPhoto()}}" style="width: 36px; height: 36px;" >
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar" data-mcs-theme="dark">
                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">当前</h6>
                            </div>
                            <ul class="account-settings">
                                <li>
                                    <a href="05-PersonDetail.html" th:href="@{/personDetail}">
                                        <svg class="olymp-menu-icon">
                                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-menu-icon"
                                            th:href="@{/svg-icons/sprites/icons.svg#olymp-menu-icon}"></use>
                                        </svg>
                                        <span>个人资料</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="11-Publish.html" th:href="@{/publish}">
                                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
                                             data-placement="right" data-original-title="FAV PAGE">
                                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-star-icon"
                                            th:href="@{/svg-icons/sprites/icons.svg#olymp-star-icon}"></use>
                                        </svg>
                                        <span>发表动态</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="08-ProfilePage-LoggedOut.html" th:href="@{/user/signOut}">
                                        <svg class="olymp-logout-icon">
                                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-logout-icon"
                                            th:href="@{/svg-icons/sprites/icons.svg#olymp-logout-icon}"></use>
                                        </svg>
                                        <span>登出</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!--数据：当前用户昵称-->
                <a href="02-ProfilePage.html" th:href="@{'/profilePage?userId='+${session.user.getUserId()}}" class="author-name fn">
                    <div class="author-title">
                        <span th:text="${session.user.getUname()}"></span>
                        <svg class="olymp-dropdown-arrow-icon">
                            <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"
                            th:href="@{/svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon}"></use>
                        </svg>
                    </div>
                </a>
            </div>
            <!--end导航栏用户-->
        </div>
    </div>
</header>
</body>
</html>